<template>
	<view class="content">
		<view class="article-title">{{noticeInfo.noticeTitle}}</view>
		<view class="article-meta">
			类型：{{noticeInfo.noticeType == '1' ? '通知':'公告'}} 发起于 {{noticeInfo.createTime}}</text>
		</view>
		<u-line color="#2979ff"></u-line>
		<br />
		<view class="article-content">
			<!-- <u-parse :content="noticeInfo.noticeContent"  ></u-parse> -->
			<textarea :value="noticeInfo.noticeContent" disabled="false"></textarea>
		</view>
	</view>
</template>

<script>
	import {
		getAppnotice
	} from '@/api/system/appnotice.js'
	export default {
		onLoad(params) {
			this.noticeId = params.noticeId;
			if (this.noticeId == undefined) {
				this.$modal.msgError('通知公告不存在')
			} else {
				this.$modal.loading("正在加载")
				this.getNoticeInfo()
				this.$modal.closeLoading()
			}
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary');
			// #endif
		},
		data() {
			return {
				noticeId: undefined,
				noticeInfo: {},
			}
		},
		methods: {
			getNoticeInfo() {
				getAppnotice(this.noticeId).then(res => {
					this.noticeInfo = res.data
					this.noticeInfo.noticeContent = this.noticeInfo.noticeContent
					this.noticeInfo.noticeContent = this.formatRichText(this.noticeInfo.noticeContent)
				})
			},
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.content {
		margin: 20px;
		padding: 10upx 2%;
		flex-wrap: wrap;
	}

	.article-title {
		font-size: 40rpx;
		font-weight: 400;
		text-align: left;
		padding-bottom: 10rpx;
		font-weight: bold;
		margin: 30rpx 30rpx 0;
		color: #333333;
	}

	.article-meta {
		padding: 10rpx 30rpx 30rpx;
		color: #999999;
		border-bottom: 1px solid #ededed;
	}

	.article-content {
		padding: 30rpx 30rpx 0rpx;
		overflow: hidden;
		font-size: 30rpx;
		line-height: 50rpx;
	}
</style>